<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客首页</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="/css/layout.css">
<style type="text/css">
	
	.he{
		margin-top: 10px;
	}
	.form-group{
		margin-left: 15px;
		margin-top: 5px;
	}
	.imgss{
		height: 10px;
		width: 10px;
	}
	.imgs{
		height: 30px;
		width: 30px;
	}
	.desc{
		margin-left: 0;
	}
	
	
</style>
</head>
<body>
<header>
 
  <!-- 导航标签 -->
  <nav>
    <div class="container" >  
      <!-- 添加导航条 -->
      <div class="he" style="display:inline;" >
        <ul class="nav navbar-nav" >
          <li><a href="HomeServlet">首页</a></li>
          <li><a id="follow_article">关注人</a></li>
          <li><a href="SendServlet">话题</a></li>
          <li><a href="SendServlet">小册</a></li>
          <li><a href="SendServlet">活动</a></li>
        </ul>     
        <form class="form-inline" >
					  <div class="form-group" style="display:inline;margin-left: 100px;">
					  	
					  	
						    <input id="articleTitle" name="title" type="text" class="form-control"  placeholder="请输入文章标题">
						    <input id="btn_search" class="btn btn-primary" type="button" value="搜索文章" />				 
					    
					    		    
					    	<div class="dropdown" style="display:inline;margin-left: 20px;">
								  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									写文章
								    <span class="caret"></span>
								  </button>
								  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								    <li><a href="#">Action</a></li>
								    <li><a href="#">Another action</a></li>
								    <li><a href="#">Something else here</a></li>
								  </ul>
								</div>
								<div class="dropdown" style="display:inline;margin-left: 20px;">
								  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
								    Dropdown
								  </button>
								  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								    <li><a href="#">Action</a></li>
								    <li><a href="#">Another action</a></li>
								    <li><a href="#">Something else here</a></li>
								  </ul>
								</div>
								<div class="dropdown" style="display:inline;margin-left: 20px;">
								  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									 <div class="imgss" style="display:inline;">
					       		<img class="imgs" src="/images/wugui.jpg">
					       	</div>
								  </button>
								  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								    <li><a href="#">Action</a></li>
								    <li><a href="#">Another action</a></li>
								    <li><a href="#">Something else here</a></li>
								  </ul>
								</div>						
						 </div>
				</form>  
				   	       
      </div>     
			
				
    </div>
  </nav>
  		<div style="margin-left: 190px;">
 				<ul class="nav nav-pills">
				  <li  role="presentation"><a href="#">Home</a></li>
				  <li role="presentation"><a href="#">Profile</a></li>
				  <li role="presentation"><a href="#">Messages</a></li>
				  <li role="presentation"><a href="#">Messages</a></li>
				  <li role="presentation"><a href="#">Messages</a></li>
				  <span style="margin-left: 490px;">分类标签</span>
				</ul>
		</div>
   </header>
  <!-- 正文区域 -->
  <section>
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <h2 class="page-header">
            <span id="all_title" class="fa fa-star-o"> 精选置顶</span>
          </h2>
          <!-- 第一篇文章开始 -->
          <!-- 巨幕 -->
          <div id="article_list">
          <div th:each="article,memberStat:${allArticles}" th:if="${memberStat.index} < 1" class="jumbotron">
            <div class="row">
              <div class="col-md-6">
                <!-- 响应式图片 -->
                <img class="img-responsive img-rounded" src="images/img1.jpg" th:src="@{'/images/'+${article.images}}">
                  <!-- 替换属性路径时使用@其它使用$ -->
              </div>
              <div class="col-md-6">
                <!-- 文章介绍 -->
                <h3 class="row1">
                <!--th:text=${first.title}  -->
                  <a href="article.html" th:text=${article.title}> 《我不是药神》观后的反思</a>
                </h3>
                <!-- th:text=${article.abstracts} -->
                <p th:text=${article.abstracts==null?article.pcContent:article.abstracts} class="row4">《我不是药神》是由文牧野执导，宁浩、徐峥共同监制的剧情片，徐峥、
                  周一围、王传君、谭卓、章宇、杨新鸣等主演 。该片于2018年7月5日在中国上映。
                  影片讲述了神油店老板程勇从一个交不起房租的男性保健品商贩，一跃成为印度仿制药“格列宁”独家代理商的故事。</p>
                <!-- th:text="'作者:'+${first.userName}" -->
                <p th:each="username,statName:${allNames}" 
                   th:if="${statName.index} == ${memberStat.index}" th:text="'作者:'+${username}">作者：admin</p>
                
                <span th:each="tags,memberStat:${allTags}" th:if="${memberStat.index} < 1">               
                	<a th:each="tag : ${tags}" th:text=${tag} class="btn btn-info btn-xs">演员</a>
                </span>                 
                <a th:remove="all" class="btn btn-info btn-xs">电影</a>
              </div>
            </div>
          </div>
          
          <!-- 第一篇文章结束 -->
          <!-- 第2-4文章开始 -->
          <div class="row">
            <div th:each="article,memberStat:${allArticles}" th:if="${memberStat.index} >= 1 and ${memberStat.index}<=3" class="col-md-4" >
              <!-- 缩略图组件开始 -->
              <div class="thumbnail">
                <img th:src="@{'/images/'+${article.images}}" class="img-responsive img-rounded" src="images/img20.jpg">
                <div class="caption">
                  <h3 class="row1">
                    <a th:text=${article.title} href="article.html" >人民空军，生日快乐！生日快乐！</a>
                  </h3>
                  <!-- th:text="${'作者：'+a.userName}" -->
                  <p th:each="username,statName:${allNames}" 
                   th:if="${statName.index} == ${memberStat.index}" th:text="'作者:'+${username}">作者：admin</p>
                  <p>
                    <span th:each="tags,stat:${allTags}" th:if="${stat.index} == ${memberStat.index}">
                    <a th:each="tag : ${tags}" th:text=${tag} class="btn btn-info btn-xs">新闻</a> </span>
                    <a th:remove="all" class="btn btn-info btn-xs">军事</a>
                  </p>
                </div>
              </div>
              <!-- 缩略图组件结束 -->
            </div>          
          </div>
          <!-- 第2-4文章结束 -->
          
          <!-- 第5-8文章开始 -->
          <!-- 面板组件开始 -->
          <div th:each="article,memberStat:${allArticles}" th:if="${memberStat.index} > 3" class="panel panel-default">
            <div class="panel-body">
              <div class="row" >
                <!-- 左侧标题和简介 -->
                <div class="col-md-8">
                  <h3 class="row1">
                    <a th:text=${article.title} href="article.html">给大家推荐几款不错的耳机</a>
                  </h3>
                  <!-- th:text=${s.abs} -->
                  <p th:text=${article.abstracts==null?article.pcContent:article.abstracts}>
                    耳机其实是我们生活中经常使用的设备，如果你觉得太便宜的耳机质量差，太贵的又觉得没必要的话，那就可以看看我推荐给大家的这些了。
                    价格没有特别贵，希望能帮助你</p>
                </div>
                <!-- 右侧图片 -->
                <div class="col-md-4">
                  <img th:src="@{'/images/'+${article.images}}" class="img-responsive img-rounded" src="images/img24.jpg">
                </div>
              </div>
            </div>
            <!-- 底部区域开始 -->
            <div class="panel-footer">
              <div class="row">
                <div class="col-md-3">
                  <span th:text=${article.createTime} class="fa fa-calendar"> 2018-10-19 11:50</span>
                </div>
                <div class="col-md-2">
                  <!-- 文章游览量 -->
                  <span th:text="' '+${article.browse}" class="fa fa-eye"> 3</span>
                </div>
                <div class="col-md-2">
                <!--评论量-->
                  <span th:text="' '+${article.commentNum}" class="fa fa-comment-o"> 0</span>
                </div>
                
                <div class="col-md-3" >
                  <span th:each="tags,stat:${allTags}" th:if="${stat.index} == ${memberStat.index}">
                  	<a th:each="tag : ${tags}" th:text=${tag} class="btn btn-info btn-xs">歌曲</a> 
                  </span>
                  	<a th:remove="all" class="btn btn-info btn-xs">手机</a> 
                  	<a th:remove="all" class="btn btn-info btn-xs">耳机</a>
                </div>
                
                <div class="col-md-2">
                <!-- th:text="'作者：'+${s.userName}" -->
                  <span th:each="username,statName:${allNames}" 
                   th:if="${statName.index} == ${memberStat.index}" th:text="'作者:'+${username}" class="pull-right">作者：admin</span>
                </div>
              </div>
            </div>
          </div>
          
          <div id="scroll_bottom">
          	
          </div>
          <div id="empty_note">
          	
          </div>
          <!-- 底部区域结束 -->
          <!-- 面板组件结束 -->
          <!-- 第5-8文章结束 -->
          </div>
        </div>
        
        <div class="col-md-3">
          <h2 class="page-header">
            <span class="fa fa-thumbs-o-up"> 推荐阅读</span>
          </h2>
         
          
          <!-- 最新内容开始 -->
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-calendar"> 最新内容</span>
              </h3>
            </li>           
            <li th:each="article,memberStat:${allArticles}" th:if="${memberStat.index} < 5" class="list-group-item">
            	<a th:text=${article.title} href="article.html" class="row1">《炉石传说》卡牌游戏系统介绍卡牌游戏系统介绍</a>
            </li>         
          </ul>
          <!-- 最新内容结束 -->

          <!-- 热门排行 -->
          <ul class="list-group">
            <!-- 头 -->
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-comment-o"> 热门排行</span>
              </h3>
            </li>
            <!-- 文章列表 -->
            <li th:each="titles : ${hotArticles}" class="list-group-item">
            	<!-- th:text=${a.title} -->
            	<a th:text=${titles.title} href="article.html" class="row1">我要支持markDown</a>
            </li>
          </ul>
          
          <!-- 浏览最多 -->
          <ul class="list-group">
            <!-- 头 -->
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-eye"></span> 浏览最多
              </h3>
            </li>
            <!-- 文章列表 -->
            <li th:each="browse : ${browseArticles}" class="list-group-item">
            	<!-- th:text=${a.title} -->
            	<a th:text=${browse.title} href="article.html" class="row1">mate20 pro真不错了</a>
            </li>          
          </ul>

          <!-- 分类标签 -->
          <ul class="list-group">
            <!-- 头 -->
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-tag"></span> 分类标签</span>
              </h3>
            </li>
            <!-- 文章列表 -->
            <div id="enter">
	            <li  th:each="a,stat:${tagNumber}" th:if="${stat.index} < 5"  class="list-group-item">
	            	<a id="tag_list" th:text="${a.tagName}+'('+${a.tagSum}+')'" 
	            	   th:attr="tagName=${a.tagName}" class="row1">八卦(6)</a>
	            </li>
            </div>
          </ul>


          <!-- 友情链接 -->
          <ul class="list-group">
            <!-- 头 -->
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-link"></span> 友情链接</span>
              </h3>
            </li>
            <!-- 文章列表 -->
            <li th:each="l : ${link}" class="list-group-item">
            	<!-- th:text="${l.title}" th:href=${l.address}  -->
            	<a class="row1" href="">网易</a>
            </li>
            <!-- th:remove="all"  -->
            <li class="list-group-item"><a href="https://123.sogou.com" class="row1">搜狗</a></li>
            <li class="list-group-item"><a href="http://www.baidu.com" class="row1">百度</a></li>
            <li class="list-group-item"><a href="http://cn.bing.com" class="row1">必应</a></li>
            <li class="list-group-item"><a href="https://www.qq.com" class="row1">腾讯</a></li>
            <li class="list-group-item"><a href="http://www.jd.com" class="row1">京东</a></li>
            <li class="list-group-item"><a href="http://www.taobao.com" class="row1">淘宝</a></li>
            <li class="list-group-item"><a href="http://www.tianmao.com" class="row1">天猫</a></li>
          </ul>
          <!-- ***********最终版本结束**************** -->

        </div>
      </div>
    </div>
  </section>



  <footer class="well">
    <div class="container">
      <b>Copyright © 2020 Shangxing.com All Rights Reserved
        浙ICP备88888888号-00 <a href="http://www.tmooc.cn">杭州上行科技集团有限公司</a>
        版权所有
      </b>
      <!-- pull-right等效float:right 
       text-right是让文本在标签内部靠右对齐
       pull-right是让标签在父标签中靠右对齐-->
      <span class="pull-right"><b>Version</b> 0.1.0</span>
    </div>
  </footer>
</body>
<script type="text/javascript" src="/bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="/bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="/bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="/bootstrap3/js/respond.min.js"></script>
<script type="text/javascript">
	$("#btn_search").click(function(){
		//console.log($("#articleTitle").val())
		$.ajax({
		    "url" : "/show/searchList",
		    "data" : {title:$("#articleTitle").val()},
		    "type" : "POST",    
		    "dataType" : "json",
		    success : function(json) {
		    	let list = json.data;
		    	console.log(list)
		    	let articles;
		    	let tagList;
		    	let nameList;
		    	for(let n = 0; n<list.length; n++){
		    		if(n == 0){
		    			articles = list[0];
		    		}else if(n == 1){
		    			tagList = list[1];
		    		}else{
		    			nameList = list[2];
		    		}
		    	}
		    	console.log(articles)
		    	//console.log(tagList)
		    	//console.log(nameList)
		      	if (json.status == 200) {
		    		console.log("返回值200已确认！")
		    		$("#all_title").empty();
		    		$("#article_list").empty();
		    		if(articles.length == 0){		    			
		    			let html = '<span style="font-size:20px">没有查询到任何内容！！！！！</span>';
		    		    $("#article_list").append(html);
		    		}else{
		    			let htmlTitle = '<span> #{allTitle}</span>';
		    			htmlTitle = htmlTitle.replace(/#{allTitle}/g, "查询精选");	
		    			$("#all_title").append(htmlTitle);
		    			
		    			for (let i = 0; i < articles.length; i++) {
		    			let html = '<div class="panel panel-default">'
		                + '<div class="panel-body">'
		                + '<div class="row" >'              
		                + '<div class="col-md-8">'
		                   + '<h3 class="row1">'
		                     + '<a href="article.html">#{title}</a>'
		                   + '</h3>'
		                   + '<p>#{abstracts}</p>'
		                  + '</div>'
		                  + '<div class="col-md-4">'
		                   + '<img src="/images/#{image}" class="img-responsive img-rounded" />'
		                 + '</div>'
		               + '</div>'
		             + '</div>'
		             + '<div class="panel-footer">'
		               + '<div class="row">'
		                 + '<div class="col-md-3">'
		                   + '<span class="fa fa-calendar"> #{createTime}</span>'
		                  + '</div>'
		                 + '<div class="col-md-2">'
		                  + '<span class="fa fa-eye"> #{browse}</span>'
		                 + '</div>'
		                + '<div class="col-md-2">'
		                   + '<span class="fa fa-comment-o"> #{commentNum}</span>'
		                 + '</div>'
		                 + '<div class="col-md-3" >'
		                   + '<span>'
		                      + '<a class="btn btn-info btn-xs">#{tag}</a>' 
		                   + '</span>'
		                 + '</div>'
		                  + '<div class="col-md-2">'
		                    + '<span class="pull-right">作者：#{username}</span>'
		                  + '</div>'
		                + '</div>'
		              + '</div>'
		            + '</div>';
		            
		            html = html.replace(/#{title}/g, articles[i].title);
		            if(articles[i].abstracts == null){
		            	html = html.replace(/#{abstracts}/g, articles[i].pcContent);
		            }else{
		            	html = html.replace(/#{abstracts}/g, articles[i].abstracts);
		            } 
		            html = html.replace(/#{image}/g, articles[i].images);
		            html = html.replace(/#{createTime}/g, articles[i].createTime);
		            html = html.replace(/#{browse}/g, articles[i].browse);
		            html = html.replace(/#{commentNum}/g, articles[i].commentNum);
		            html = html.replace(/#{username}/g, nameList[i]);
		            html = html.replace(/#{tag}/g, tagList[i]);	
		           
		            $("#article_list").append(html);
		    			}
		    		}		    			    		
		        	alert("查询成功！");
		      	}else if(result.status == 400){
		    		alert("错误请求！");
		      }
		    },
		    error : function(json){
		    	alert("查询失败！");
		    }	    
		  });
	});
	
	/* 标签查询 */
	$("#enter").on('click','#tag_list',function(){
		console.log("已点击！");
		$.ajax({
		    "url" : "/show/tagArticlesList",
		    "data" : {"tagName":JSON.stringify($(this).attr('tagName'))},
		    "type" : "POST",    
		    "dataType" : "json",
		    success : function(json) {
		    	let list = json.data;
		    	console.log(list)
		    	let articles;
		    	let tagList;
		    	let nameList;
		    	for(let n = 0; n<list.length; n++){
		    		if(n == 0){
		    			articles = list[0];
		    		}else if(n == 1){
		    			tagList = list[1];
		    		}else{
		    			nameList = list[2];
		    		}
		    	}		    	
		    	if (json.status == 200) {
		    		console.log("返回值200已确认！")
		    		$("#all_title").empty();
		    		$("#article_list").empty();
		    		console.log("list.data:"+list.data)
		    		if(articles.length == 0){
		    			let html = '<span style="font-size:20px">没有查询到任何内容！！！</span>';
		    		    $("#article_list").append(html);
		    		}else{
		    			let htmlTitle = '<span> #{allTitle}</span>';
		    			htmlTitle = htmlTitle.replace(/#{allTitle}/g, "标签相关");	
		    			$("#all_title").append(htmlTitle);
		    			
		    			for (let i = 0; i < articles.length; i++) {
		    			let html = '<div class="panel panel-default">'
		                + '<div class="panel-body">'
		                + '<div class="row" >'              
		                + '<div class="col-md-8">'
		                   + '<h3 class="row1">'
		                     + '<a href="article.html">#{title}</a>'
		                   + '</h3>'
		                   + '<p>#{abstracts}</p>'
		                  + '</div>'
		                  + '<div class="col-md-4">'
		                   + '<img src="/images/#{image}" class="img-responsive img-rounded" />'
		                 + '</div>'
		               + '</div>'
		             + '</div>'
		             + '<div class="panel-footer">'
		               + '<div class="row">'
		                 + '<div class="col-md-3">'
		                   + '<span class="fa fa-calendar"> #{createTime}</span>'
		                  + '</div>'
		                 + '<div class="col-md-2">'
		                  + '<span class="fa fa-eye"> #{browse}</span>'
		                 + '</div>'
		                + '<div class="col-md-2">'
		                   + '<span class="fa fa-comment-o"> #{commentNum}</span>'
		                 + '</div>'
		                 + '<div class="col-md-3" >'
		                   + '<span>'
		                      + '<a class="btn btn-info btn-xs">#{tag}</a>' 
		                   + '</span>'
		                 + '</div>'
		                  + '<div class="col-md-2">'
		                    + '<span class="pull-right">作者：#{username}</span>'
		                  + '</div>'
		                + '</div>'
		              + '</div>'
		            + '</div>';
		            
		            html = html.replace(/#{title}/g, articles[i].title);
		            if(articles[i].abstracts == null){
		            	html = html.replace(/#{abstracts}/g, articles[i].pcContent);
		            }else{
		            	html = html.replace(/#{abstracts}/g, articles[i].abstracts);
		            } 
		            html = html.replace(/#{image}/g, articles[i].images);
		            html = html.replace(/#{createTime}/g, articles[i].createTime);
		            html = html.replace(/#{browse}/g, articles[i].browse);
		            html = html.replace(/#{commentNum}/g, articles[i].commentNum);
		            html = html.replace(/#{username}/g, nameList[i]);
		            html = html.replace(/#{tag}/g, tagList[i]);	
		           
		            $("#article_list").append(html);
		    			}
		    		}		    			    		
		        	alert("查询成功！");
		      	}else if(result.status == 400){
		    		alert("错误请求！");
		      }
		    },
		    error : function(json){
		    	alert("查询失败！");
		    }	    
		});	
    });
	
	/* 关注人博文 */
	$("#follow_article").click(function(){
		$.ajax({
		    "url" : "/show/followList",
		    "type" : "POST",    
		    "dataType" : "json",
		    success : function(json) {
		    	let list = json.data;
		    	console.log(list)
		    	let articles;
		    	let tagList;
		    	let nameList;
		    	for(let n = 0; n<list.length; n++){
		    		if(n == 0){
		    			articles = list[0];
		    		}else if(n == 1){
		    			tagList = list[1];
		    		}else{
		    			nameList = list[2];
		    		}
		    	}
		    	console.log(articles)
		    	//console.log(tagList)
		    	//console.log(nameList)
		      	if (json.status == 200) {
		    		console.log("返回值200已确认！")		    		
		    		$("#all_title").empty();
		    		$("#article_list").empty();
		    		console.log("list.data:"+list.data)
		    		if(articles.length == 0){
		    			let html = '<span style="font-size:20px">没有查询到任何内容！！！！！</span>';
		    		    $("#article_list").append(html);
		    		}else{
		    			let htmlTitle = '<span> #{allTitle}</span>';
		    			htmlTitle = htmlTitle.replace(/#{allTitle}/g, "您的关注");	
		    			$("#all_title").append(htmlTitle);
		    			
		    			for (let i = 0; i < articles.length; i++) {
		    			let html = '<div class="panel panel-default">'
		                + '<div class="panel-body">'
		                + '<div class="row" >'              
		                + '<div class="col-md-8">'
		                   + '<h3 class="row1">'
		                     + '<a href="article.html">#{title}</a>'
		                   + '</h3>'
		                   + '<p>#{abstracts}</p>'
		                  + '</div>'
		                  + '<div class="col-md-4">'
		                   + '<img src="/images/#{image}" class="img-responsive img-rounded" />'
		                 + '</div>'
		               + '</div>'
		             + '</div>'
		             + '<div class="panel-footer">'
		               + '<div class="row">'
		                 + '<div class="col-md-3">'
		                   + '<span class="fa fa-calendar"> #{createTime}</span>'
		                  + '</div>'
		                 + '<div class="col-md-2">'
		                  + '<span class="fa fa-eye"> #{browse}</span>'
		                 + '</div>'
		                + '<div class="col-md-2">'
		                   + '<span class="fa fa-comment-o"> #{commentNum}</span>'
		                 + '</div>'
		                 + '<div class="col-md-3" >'
		                   + '<span>'
		                      + '<a class="btn btn-info btn-xs">#{tag}</a>' 
		                   + '</span>'
		                 + '</div>'
		                  + '<div class="col-md-2">'
		                    + '<span class="pull-right">作者：#{username}</span>'
		                  + '</div>'
		                + '</div>'
		              + '</div>'
		            + '</div>';
		            
		            html = html.replace(/#{title}/g, articles[i].title);
		            if(articles[i].abstracts == null){
		            	html = html.replace(/#{abstracts}/g, articles[i].pcContent);
		            }else{
		            	html = html.replace(/#{abstracts}/g, articles[i].abstracts);
		            } 
		            html = html.replace(/#{image}/g, articles[i].images);
		            html = html.replace(/#{createTime}/g, articles[i].createTime);
		            html = html.replace(/#{browse}/g, articles[i].browse);
		            html = html.replace(/#{commentNum}/g, articles[i].commentNum);
		            html = html.replace(/#{username}/g, nameList[i]);
		            html = html.replace(/#{tag}/g, tagList[i]);	
		           
		            $("#article_list").append(html);
		    			}
		    		}		    			    		
		        	alert("查询成功！");
		      	}else if(result.status == 400){
		    		alert("错误请求！");
		      }
		    },
		    error : function(json){
		    	alert("查询失败！");
		    }	    
		  });
		});
	
	var index = 0;
	//下拉触底
	 $(document).scroll(function() {
		if($(document).height() == $(window).height() + $(window).scrollTop()){
        	console.log("滑到底部！！！")
        	$.ajax({
    		    "url" : "/show/scrollArticlesList",
    		    "data" : {index:index},
    		    "type" : "POST",    
    		    "dataType" : "json",
    		    success : function(json) {
    		    	index++;
    		    	let list = json.data;
    		    	console.log(list)
    		    	let articles;
    		    	let tagList;
    		    	let nameList;
    		    	for(let n = 0; n<list.length; n++){
    		    		if(n == 0){
    		    			articles = list[0];
    		    		}else if(n == 1){
    		    			tagList = list[1];
    		    		}else{
    		    			nameList = list[2];
    		    		}
    		    	}
    		    	if(articles.length == 0){
    		    		$("#empty_note").empty();
		    			let html = '<span style="font-size:20px">没有查询到任何内容！！！！！</span>';
		    		    $("#empty_note").append(html);
		    		}else{
		    			for (let i = 0; i < articles.length; i++) {
		    			let html = '<div class="panel panel-default">'
		                + '<div class="panel-body">'
		                + '<div class="row" >'              
		                + '<div class="col-md-8">'
		                   + '<h3 class="row1">'
		                     + '<a href="article.html">#{title}</a>'
		                   + '</h3>'
		                   + '<p>#{abstracts}</p>'
		                  + '</div>'
		                  + '<div class="col-md-4">'
		                   + '<img src="/images/#{image}" class="img-responsive img-rounded" />'
		                 + '</div>'
		               + '</div>'
		             + '</div>'
		             + '<div class="panel-footer">'
		               + '<div class="row">'
		                 + '<div class="col-md-3">'
		                   + '<span class="fa fa-calendar"> #{createTime}</span>'
		                  + '</div>'
		                 + '<div class="col-md-2">'
		                  + '<span class="fa fa-eye"> #{browse}</span>'
		                 + '</div>'
		                + '<div class="col-md-2">'
		                   + '<span class="fa fa-comment-o"> #{commentNum}</span>'
		                 + '</div>'
		                 + '<div class="col-md-3" >'
		                   + '<span>'
		                      + '<a class="btn btn-info btn-xs">#{tag}</a>' 
		                   + '</span>'
		                 + '</div>'
		                  + '<div class="col-md-2">'
		                    + '<span class="pull-right">作者：#{username}</span>'
		                  + '</div>'
		                + '</div>'
		              + '</div>'
		            + '</div>';
		            
		            html = html.replace(/#{title}/g, articles[i].title);
		            if(articles[i].abstracts == null){
		            	html = html.replace(/#{abstracts}/g, articles[i].pcContent);
		            }else{
		            	html = html.replace(/#{abstracts}/g, articles[i].abstracts);
		            } 
		            html = html.replace(/#{image}/g, articles[i].images);
		            html = html.replace(/#{createTime}/g, articles[i].createTime);
		            html = html.replace(/#{browse}/g, articles[i].browse);
		            html = html.replace(/#{commentNum}/g, articles[i].commentNum);
		            html = html.replace(/#{username}/g, nameList[i]);
		            html = html.replace(/#{tag}/g, tagList[i]);	
		           
		            $("#scroll_bottom").append(html);
		    			}
		    		}		    		
    		    	
    		    }
        
        	});	
         }
 
    });
	//监听页面刷新
	 window.onbeforeunload = function(){
		console.log("页面刷新捕捉！")
		$("#empty_note").empty();
		$("#scroll_bottom").empty();
		index = 0;
	};
	


	
 

	
	
</script>


</html>



